<template>
	<view>
		<m-container :status="onLine ? status : 6" :reloadFunc="reloadFunc">
			<view class="my-header">
				<view class="tools">
					<view class="tools-item" v-if="userInfo"><image class="tools-icon" :src="imgUrl + '/50.png'" alt="" /></view>
					<view class="tools-item" v-if="userInfo"><image class="tools-icon" :src="imgUrl + '/50.png'" alt="" @tap="toSetting" /></view>
				</view>
				<view class="user-info">
					<image class="avatar" :src="userInfo ? userInfo.avatarUrl : imgUrl + '/120.png'"></image>
					<view class="info" v-if="userInfo">
						<view class="username">
							{{ userInfo.nickName }}
							<view class="gender">{{ userInfo.gender == 1 ? '👨' : '👩' }}</view>
						</view>
						<view class="phone">156****1545</view>
					</view>
					<view class="login-btn" v-else><view class="to-login" @tap="toLogin">立即登录</view></view>
				</view>
			</view>
			<view class="main">
				<!-- 快捷选项 -->
				<view class="nav-list">
					<view class="nav-item">
						<image class="nav-icon" :src="imgUrl + '/58.png'"></image>
						<text class="nav-text">我的订单</text>
					</view>
					<view class="nav-item">
						<image class="nav-icon" :src="imgUrl + '/58.png'"></image>
						<text class="nav-text">我的预约</text>
					</view>
					<view class="nav-item">
						<image class="nav-icon" :src="imgUrl + '/58.png'"></image>
						<text class="nav-text">评价</text>
					</view>
					<view class="nav-item">
						<image class="nav-icon" :src="imgUrl + '/58.png'"></image>
						<text class="nav-text">推荐有奖</text>
					</view>
					<view class="nav-item">
						<image class="nav-icon" :src="imgUrl + '/58.png'"></image>
						<text class="nav-text">积分商城</text>
					</view>
				</view>
			</view>
		</m-container>
		<tabbar :currentIndex="2"></tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
const utils = require('../../utils/utils.js')
export default {
	data() {
		return {
			status: 2,
			toast: {
				visible: false,
				text: ''
			},
			userInfo: null
		};
	},
	computed: {
		...mapState(['onLine'])
	},
	async onShow() {
		try {
			let userInfo = await utils.storage.get('userInfo');
			this.userInfo = userInfo;
		} catch (error) {
			this.userInfo = null;
		}
	},
	onLoad() {
		this.reloadFunc();
	},
	methods: {
		reloadFunc() {},
		toLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		toSetting() {
			uni.navigateTo({
				url: '/pages/my/setting/setting'
			});
		}
	}
};
</script>

<style lang="less" scoped>
.my-header {
	height: 268rpx;
	width: 100%;
	background: #d4237a;
}
.tools {
	height: 60rpx;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 10rpx 0rpx;
}
.tools .tools-item .tools-icon {
	width: 50rpx;
	height: 50rpx;
}
.tools .tools-item {
	margin-right: 40rpx;
}
.user-info {
	height: 120rpx;
	width: 100%;
	padding: 0rpx 40rpx;
	display: flex;
	align-items: center;
	color: #ffffff;
}
.user-info > .avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
}
.user-info .info {
	display: flex;
	flex-direction: column;
	padding: 10rpx 0rpx 10rpx 20rpx;
	justify-content: space-between;
}
.user-info .info .username {
	display: flex;
	font-size: 38rpx;
}
.user-info .info .phone {
	font-size: 24rpx;
	padding: 2rpx 10rpx;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid #f700ff;
	border-radius: 21rpx;
}
.login-btn {
	margin-left: 20rpx;
}
.login-btn .to-login {
	background: #ffffff;
	color: #d4237a;
	padding: 4rpx 20rpx;
	box-sizing: border-box;
	border-radius: 24rpx;
}
.main {
	padding: 20rpx;
}
.nav-list {
	height: 201rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	border-radius: 16rpx;
}
.nav-list .nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}
.nav-item > .nav-icon {
	width: 58rpx;
	height: 58rpx;
	margin-bottom: 25rpx;
}
.nav-item > .nav-text {
	font-size: 26rpx;
	color: #333333;
}
</style>
